<template>
	<view class="comment">
		<view class="content">
			<view class="info"  v-for="(item,index) in productList" :key="index">
				<view class="top">
					<image class="goodimg" :src="item.product_picture" mode="aspectFill"></image>
					<view class="item">
						<view class="name" v-for="(item,index2) in list" :key="index2" @click="setScores(index, index2)">
							<view :class="(index2 == 0 && evaluate[index].scores == 5) || (index2 == 1 && evaluate[index].scores == 3) || (index2 == 2 && evaluate[index].scores == 1)?'sel':'nosel'"></view>
							<image :src=" (index2 == 0 && evaluate[index].scores == 5) || (index2 == 1 && evaluate[index].scores == 3) || (index2 == 2 && evaluate[index].scores == 1)
								? 'http://app.chinasrv.com/attachment/xcx/icon/mal'+index2+'.png'
								: 'http://app.chinasrv.com/attachment/xcx/icon/normal'+index2+'.png'"
							 mode="aspectFill"></image>
						</view>
					</view>
				</view>
                <textarea maxlength="500" value="" v-model="evaluate[index].content" placeholder-style="color:rgba(66,81,114,0.2)" placeholder="留言点评一下～" />
			</view>
			<view class="text" @click="setAnonymous()">
				<view :class="ischeck?'sel':'nosel'" ></view>
				<view>匿名评价</view>
			</view>
		</view>
		<view class="bottom" @click="subEvaluate()">提交</view>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				list: [{
					ischeck: true
				}, {
					ischeck: false
				}, {
					ischeck: false
				}],
				ischeck:false,
				
				id : 0,
				productList : {},
				evaluate: [],
			}
		},
		methods: {
			getInfo() {
				var self = this;
				serve.request({
					url: '/member/order/view',
					data: {
						id: self.id
					}
				}).then(res => {
					if(res.code != 200) {
						uni.showToast({
							title:res.message,
							icon: 'none',
							success() {
								setTimeout(function () {
									self.jump('order_view', self.id)
								}, 2000) 
							}
						});
					}
					self.productList = res.data.productList;
					console.info(self.productList);
					self.productList.forEach((item, key) => {
						self.evaluate[key] = {
							'order_product_id':item.id,
							'scores' : 5,
							'content' : '',
						};
					});
				});
			},
			setScores(itemId, scoresKey) {
				let scores = scoresKey == 0 ? 5 : (scoresKey == 1 ? 3 : 1);
				this.evaluate[itemId].scores = scores;
				this.$forceUpdate();
			},
			setAnonymous() {
				this.ischeck = this.ischeck ? false : true;
			},
			subEvaluate() {
				var self = this;
				let evaluate = '[';
				let is_anonymous = self.ischeck ? 1 : 0;
				self.evaluate.forEach((item, key) => {
					evaluate += (key > 0 ? ',' : '')+'{"order_product_id":'+item.order_product_id+',"scores":'+item.scores+',"content":"'+item.content+'","is_anonymous":'+is_anonymous+'}';
				});
				evaluate += ']';
				serve.request({
					url: '/member/evaluate/create',
					data: {
						evaluate: evaluate
					}
				}).then(res => {
					uni.showToast({
						title:res.message,
						icon: 'none',
						success:function(){
							setTimeout(function () {
								res.code == 200 ? self.jump('order_view', self.id) : '';
							}, 2000) 
						}
					});
				});
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			this.id=options.id || 0;
			if(this.id == 0) {
				uni.showToast({
					title: "错误的访问方式",
					icon: 'none',
					success() {
						setTimeout(function () {
							this.jump('my_order_list')
						}, 2000) 
					}
				});
			}
			this.getInfo();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh(); //结束下拉加载状态
			}, 1000);
		}
	}
</script>

<style scoped lang="scss">
	.comment {
		padding-bottom: 100upx;
		.info {
			box-sizing: border-box;
			padding: 40upx 30upx 0upx;
			textarea{
				margin-top: 40upx;
				box-shadow: box-sizing;
				padding: 33upx 39upx;
				height:176upx;
				background:#FCFCFD;
				border-radius:12px;
			}
			.top {
				display: flex;
				align-items: center;

				.goodimg {
					width: 80upx;
					height: 80upx;
				}

				.item {
					margin-left:-20upx;
					display: flex;
					align-items: center;

					.name {
						display: flex;
						align-items: center;
						margin-left: 43upx;
						.sel {
							background-image: url(http://app.chinasrv.com/attachment/xcx/icon/icon37.png);
							background-repeat: no-repeat;
							width: 40upx;
							height: 40upx;
							background-size: 100%;
						}

						.nosel {
							width: 35upx;
							height: 35upx;
							border: 1upx solid rgba(60, 72, 104, 1);
							border-radius: 50%;
						}

						image {
							width: 108upx;
							height: 40upx;
							margin-left: 16upx;
						}
					}
				}
			}

		}
        .text{
			box-sizing: border-box;
			padding: 100upx 30upx 0upx;
			display: flex;
			align-items: center;
			font-size:28upx;
			color:rgba(57,72,107,0.9);
			.sel {
				background-image: url(http://app.chinasrv.com/attachment/xcx/icon/icon37.png);
				background-repeat: no-repeat;
				width: 40upx;
				height: 40upx;
				background-size: 100%;
				margin-right: 17upx;
			}
			
			.nosel {
				width: 35upx;
				height: 35upx;
				border: 1upx solid rgba(60, 72, 104, 1);
				border-radius: 50%;
				margin-right: 17upx;
			}
		}
		.bottom {
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			font-size: 32upx;
			color: rgba(255, 255, 255, 1);
			background: rgba(251, 202, 63, 1);
			bottom: 0upx;
			position: fixed;
		}
	}
</style>
